<!--保单信息-->
<template>
  <div class="app-container erha-content">
    <div class="erha-header">
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="queryForm.policyNo" clearable placeholder="保单编号" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryTable">查询</el-button>
          <!--          <el-button type="primary" @click="openAddDialog()">新增</el-button>-->
        </el-form-item>
      </el-form>
    </div>

    <div class="erha-body">
      <el-table
        :data="table.data"
        height="600"
        style="width: 100%;"
      >
        <el-table-column prop="policyNo" label="保单编号" min-width="180" />
        <el-table-column prop="policyName" label="保单名称" min-width="180" />
        <el-table-column prop="acceptanceTime" label="受理时间" min-width="180" />
        <el-table-column prop="applicantNo" label="投保人编号" min-width="180" />
        <el-table-column prop="insuredNo" label="被保险人编号" min-width="180" />
        <el-table-column prop="insurancetypeNo" label="险种编号" min-width="180" />
        <el-table-column prop="insuranceAmount" label="保险金额" min-width="180" />
        <el-table-column prop="acceptance" label="是否受理" min-width="180">
          <template v-slot="{row}">
            <el-tag v-if="row.acceptance === '0'" type="info" effect="dark">未受理</el-tag>
            <el-tag v-else-if="row.acceptance === '1'" type="" effect="dark">已受理</el-tag>
            <el-tag v-else-if="row.acceptance === '2'" type="warning" effect="dark">已理赔</el-tag>
            <el-tag v-else-if="row.acceptance === '3'" type="success" effect="dark">已完成</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" min-width="180">
          <template v-slot="{row}">
            <el-button v-if="row.acceptance === '1'" type="text" @click="settlementClaims(row)">理赔</el-button>
            <el-button v-if="row.acceptance === '2'" type="text" @click="openAddDialog(row, false)">理赔方案</el-button>
            <!--            <template v-if="row.acceptance === '0'">-->
            <!--              <el-button type="text" @click="openAddDialog(row)">编辑保单</el-button>-->
            <!--              <el-button type="text" @click="deleteById({id: row.id})">删除保单</el-button>-->
            <!--              <el-button type="text" @click="acceptance({id: row.id})">受理</el-button>-->
            <!--            </template>-->
          </template>
        </el-table-column>

      </el-table>
    </div>

    <!--新增/编辑弹窗-->
    <el-dialog
      :close-on-click-modal="false"
      :title="dialog.add.title"
      :visible.sync="dialog.add.show"
      width="600px"
    >
      <el-form ref="form" :model="dialog.add.form" label-width="120px">
        <el-form-item label="赔偿金额">
          <el-input v-model="dialog.add.form.compensationAmount" class="width-90" clearable placeholder="赔偿金额" />
        </el-form-item>
        <el-form-item label="保险事故">
          <el-radio v-model="dialog.add.form.insuranceAccident" label="1" border>是</el-radio>
          <el-radio v-model="dialog.add.form.insuranceAccident" label="2" border>否</el-radio>
        </el-form-item>
        <el-form-item label="到款时间">
          <el-date-picker
            v-model="dialog.add.form.paymentArrivalTime"
            class="width-90"
            type="date"
            value-format="yyyy-MM-DD"
            placeholder="选择日期"
          />
        </el-form-item>
      </el-form>

      <div v-if="dialog.add.editSwitch" slot="footer" class="dialog-footer text-center">
        <el-button @click="dialog.add.show = false">取 消</el-button>
        <el-button type="primary" @click="claimSettlementScheme()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  save, queryList, findById, deleteById, acceptance
} from '@/api/policyManagement'

export default {
  name: 'PolicyManagement',
  data() {
    return {
      queryForm: {},

      table: {
        data: [],
        loading: false
      },

      dialog: {
        add: {
          title: '保单',
          loading: false,
          show: false,
          editSwitch: true,
          form: {}
        }
      },

      customerType: '客户'
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.queryTable()
    },

    queryTable() {
      const params = Object.assign({}, this.queryForm)
      this.queryList(params)
    },

    settlementClaims(row) {
      const params = Object.assign({}, row)
      this.$confirm(`是否理赔？`, '审核资质', {
        distinguishCancelAndClose: true,
        confirmButtonText: '是',
        cancelButtonText: '否'
      })
        .then(() => {
          // 通过
          this.openAddDialog(row)
        })
        .catch(action => {
          if (action === 'cancel') {
            // 不通过
            params.acceptance = 3
            this.updateStatus(params)
          }
        })
    },

    claimSettlementScheme() {
      const params = Object.assign({}, this.dialog.add.form)
      params.acceptance = 2
      this.updateStatus(params)
      this.dialog.add.show = false
    },

    // 保存
    async updateStatus(params) {
      await save(params)
      this.$message({ message: '操作成功！', type: 'success' })

      this.queryTable()
    },

    // 打开新增、编辑弹窗
    openAddDialog(row, flag = true) {
      this.dialog.add.title = '生成理赔方案'
      this.dialog.add.show = true
      this.dialog.add.form = row
      this.dialog.add.editSwitch = flag
    },

    // 查询客户信息
    async queryList(params) {
      try {
        this.table.loading = true
        const res = await queryList(params)
        this.table.data = res || []
      } catch (e) {
        console.error(e)
      } finally {
        this.table.loading = false
      }
    },

    // 保存
    async save() {
      const params = Object.assign({}, this.dialog.add.form)
      params.acceptance = 0
      await save(params)
      this.$message({ message: '操作成功！', type: 'success' })

      this.dialog.add.show = false
      this.queryTable()
    },

    // 受理
    async acceptance(params) {
      await acceptance(params)
      this.$message({ message: '操作成功！', type: 'success' })

      this.queryTable()
    },

    // 删除
    deleteById(params) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await deleteById(params)
        this.$message({ message: '操作成功！', type: 'success' })
        this.queryTable()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 查询保单信息
    async findById(params) {
      const res = await findById(params)
      this.dialog.add.form = res || {}
    }

  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.width-90 {
  width: 90%;
}

::v-deep .el-scrollbar__wrap {
  overflow: scroll;
  overflow-x: hidden !important;
  height: 100%;
}
</style>
